<template>
  <div
    class="spinner_box"
    :style="{
      ...controller.simUIService.getBaseStyle(shapeNode),
      lineHeight: (shapeNode.style.fontSize || 12) + 2 + 'px',
    }"
  >
    <div v-if="inactive" class="_spinner_layer"></div>
    <div class="_spinner_text">{{ nodeValue }}</div>
    <div class="spinners">
      <span class="_spinners_up" @click.stop="changeItem(1)">
        <div class="_spinners_up_triangle"></div>
      </span>
      <span class="_spinners_down" @click.stop="changeItem(-1)">
        <div class="_spinners_down_triangle"></div>
      </span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ADCUICoreNode, ShapeKeyEnum, UIDataType } from '@/constants/types';
import { onMounted, reactive, ref, watch } from 'vue';
import { controller } from "@/engine/Controller";
import { PropertyKey } from '@/constants/constants';

const props = defineProps<{
  shapeNode: ADCUICoreNode;
}>();

const { inactive } = props.shapeNode.model?.showAttribute.extraAttribute as any;
const selectOptions = reactive<{id: string, name: string}[]>([]);
const nodeValue = props.shapeNode.propertyData.value ? ref(String(props.shapeNode.propertyData.value)) : ref(props.shapeNode.showText);
let activeIndex = 0;
const changeItem = (v: number) => {
  activeIndex = activeIndex + v;
  let modIndex = activeIndex % selectOptions.length;
  if (modIndex < 0) {
    modIndex = selectOptions.length + modIndex;
  }
  nodeValue.value = selectOptions[modIndex].name;
  controller.simUIService.uiDataChangeNoteBackend(props.shapeNode.objectId, props.shapeNode.propertyId, [selectOptions[modIndex].id]);
};
onMounted(async () => {
  if (props.shapeNode.valueType === UIDataType.Enumeration) {
    const enumModelInfo = (await controller.modelApi.modelInfo({ modelId: props.shapeNode?.propertyData.value, projectId: controller.simUIService.projectId })).data?.data;
    if (enumModelInfo) {
      if (enumModelInfo.metaclass === UIDataType.Enumeration) {
        const { value } = (await controller.modelApi.modelPropertyByKey({ modelId: props.shapeNode?.propertyData.value, projectId: controller.simUIService.projectId, key: PropertyKey.Enumeration_ownedLiteral }));
        if (value && value.length) {
          for (const [index, { id, name }] of value.entries()) {
            selectOptions.push({ id, name });
          }
          activeIndex = -1;
        }
      } else {
        const { value } = (await controller.modelApi.modelPropertyByKey({ modelId: enumModelInfo.ownerId, projectId: controller.simUIService.projectId, key: PropertyKey.Enumeration_ownedLiteral }));
        if (value && value.length) { 
          for (const [index, { id, name }] of value.entries()) {
            selectOptions.push({ id, name });
            if (enumModelInfo.name === name) {
              activeIndex = index;
            }
          }
        }
        nodeValue.value = enumModelInfo.name;
      }
    }
  }
});

watch(
  () => props.shapeNode.propertyData,
  () => {
    nodeValue.value = props.shapeNode.propertyData.value;
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.spinner_box {
  display:flex;
  align-items: center;
  height: 100%;
  border: 1px solid #C4C1C2 !important;
  border-radius: 2px;
  position: relative;
  ._spinner_layer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba($color: #000000, $alpha: .1);
    cursor: not-allowed;
  }
  ._spinner_text {
    width: 100%;
    flex: auto;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
    text-align: left;
  }
  .spinners {
    width: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    span {
      display: flex;
      flex: 1;
      border-left: 1px solid #D0D0D0;
      background: rgba($color: #D0D0D0, $alpha: .4);;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    ._spinners_up {
      border-bottom: 1px solid #D0D0D0;
      margin-bottom: 1px;
    }
    ._spinners_up_triangle {
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-bottom: 3px solid #414F58;
    }
    ._spinners_down_triangle {
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 3px solid #414F58;
    }
    ._spinners_down {
      border-top: 1px solid #414F58;
    }
  }
}
</style>